<template>
  <div id="tqthree">
    <div class="top">
      <h1>
        <span>特权5</span>会员专属客服
      </h1>
    </div>
    <div class="bot">
      <img
        src="https://cube.elemecdn.com/9/b8/c5f575ba0eb4ed2531c21c8f3ce0bpng.png?x-oss-process=image/quality,q_90/format,webp"
        alt
      />
      <p>超级会员享有24小时客服专线，配有专属客服，竭诚提供更专业、更优质的服务</p>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style lang="less" scoped>
#tqthree {
  margin: 10px;
  height: 178px;
  margin-bottom: 100px;
  .top {
    border-radius: 2.13333vw;
    box-shadow: 0 0.53333vw 1.06667vw 0 rgba(0, 0, 0, 0.03);
    background-color: #fff;
    background-position: 50%;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    height: 70px;
    overflow: hidden;
    h1 {
      font-size: 4.26667vw;
      font-weight: 700;
      color: #333;
      margin: 20px 0 5px 5px;
      display: flex;
      align-items: center;
      margin-left: 10px;
      span {
        font-size: 3.2vw;
        height: 5.33333vw;
        line-height: 5.33333vw;
        text-align: center;
        color: rgba(64, 33, 10, 0.8);
        background-color: #f2d499;
        padding: 0.26667vw 1.06667vw;
        border-radius: 1.06667vw;
        vertical-align: text-bottom;
        margin-right: 1.6vw;
      }
    }
  }
  .bot {
    text-align: center;
    img {
      width: 34.133vw;
      height: auto;
      margin: 4.267vw auto !important;
      display: inherit;
    }
    p {
      text-align: left;
      margin: 15px;
      display: inherit;
    }
  }
}
</style>